<template>
  <div class="CardManagement">
    <div class="ctit">
      <span>
        相机卡管理
      </span>
      <span @click="addcard" v-if="abilityList.indexOf('edit')!=-1">
        新增
      </span>
    </div>
    <!--搜索-->
    <div>
      <el-row>
        <el-col style="margin-left: .3rem;" :span="6">
          <!--  <el-input placeholder="请输入内容" v-model="cardNumber" clearable class="input-with-select">
              <el-button slot="append" @click="sea" icon="el-icon-search"></el-button>
            </el-input>-->
          <el-select v-model="cardNumber" clearable filterable
                     @change="sea"
                     style="width:100%;"
                     placeholder="卡编号">
            <el-option
              v-for="item in cardNumArr"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

    </div>
    <!--搜索-->

    <!--列表 B-->
    <!--     列表 B-->
    <table>
      <thead>
      <th>卡编号</th>
      <th>添加时间</th>
      <th>备注</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="(t,index) in card_Arr">
        <td>{{t.number}}</td>
        <td>{{t.addTime | convertDate}}</td>
        <td>{{t.remark}}</td>
        <td style="cursor: pointer">
          <span
            @click="modification(t)" v-if="abilityList.indexOf('edit')!=-1"
            class="el-icon-edit-outline"></span>
          &nbsp;
          &nbsp;
          <span
            @click="del(t)" v-if="abilityList.indexOf('edit')!=-1"
            class="el-icon-delete"></span>
        </td>
      </tr>
      </tbody>
    </table>
    <!--     列表 E-->
    <!--分页 B-->
    <div class="pagecr">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=pageSize
        layout="total,prev, pager, next, jumper"
        :total=totalNumber>
      </el-pagination>
    </div>
    <!--分页 B-->
    <!--列表 E-->

    <!--新增-->
    <div class="addForm" v-show="addc">
      <div class="fcr">
        <div style="text-align: center;font-size: .2rem">
          <span>
            添加储存卡
          </span>
        </div>

        <div style="margin-top: .2rem;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="卡编号" prop="cardNumber">
              <el-input v-model="ruleForm.cardNumber"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="ruleForm.remark"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">{{txt}}</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
    <!--新增-->

  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'

  export default {
    data() {
      return {
        txt: "立即创建",
        areaId: "",
        cardNumber: "",
        pageSize: 11,
        pageNum: 0,
        card_Arr: [],
        totalNumber: 0,
        cardNumArr: [],
        abilityList: [],
        ruleForm: {
          cardNumber: '',
          remark: ""
        },
        rules: {
          cardNumber: [
            {required: true, message: '请输入卡编号', trigger: 'blur'}
          ],
        },
        addc: false,
        modobj: {
          id: "",
          addTime: "",
          area: "",
          siteId: ""
        }
      }
    },
    mounted() {
    },
    created() {
      //获取areaid
      this.abilityList = sessionStorage.getItem('abilityList')
      this.areaId = sessionStorage.getItem('areaId');
      this.initialization();
      this.getcn();
    },
    methods: {
      initialization() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.memory_card, {
            areaId: vm.areaId,
            pageSize: 11,
            keyWord: vm.cardNumber,
            pageNum: vm.pageNum
          });
          vm.card_Arr = res.data.content;
          vm.totalNumber = res.data.totalElements;
        })();
      },
      sea() {
        this.initialization();
      },
      getcn() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getnewCameraNumber, {
            areaId: vm.areaId
          })
          vm.cardNumArr = res.data.data;
        })()
      },
      //分页
      handleCurrentChange(val) {
        this.pageNum = `${val}` - 1;
        this.initialization();
      },
      addcard() {
        this.addc = true;
        this.txt = '立即创建';
      },
      modification(t) {
        this.txt = '确认修改';
        this.addc = true;
        this.ruleForm.cardNumber = t.number;
        this.ruleForm.remark = t.remark;
        this.modobj.id = t.id;
        this.modobj.addTime = t.addTime;
        this.modobj.siteId = t.siteId;
        this.modobj.area = this.areaId;
      },
      submitForm(formName) {
        if (this.txt == '立即创建') {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var vm = this;
              (async function () {
                let res = await http.post(api.infrared.add_card, {
                  number: vm.ruleForm.cardNumber,
                  remark: vm.ruleForm.remark,
                  areaId: vm.areaId,
                })

                if (res.data.message == 'success') {
                  vm.addc = false;
                  vm.$refs.ruleForm.resetFields();
                  vm.success('添加成功');
                  vm.initialization();
                } else {
                  vm.warn('网络异常，联系管理员')
                }
              })();
            } else {
              return false;
            }
          });
        }
        if (this.txt == '确认修改') {
          var vm = this;
          (async function () {
            let res = await http.put(api.infrared.change_card, {
              id: vm.modobj.id,
              addTime: vm.modobj.addTime,
              area: vm.modobj.area,
              siteId: vm.modobj.siteId,
              number: vm.ruleForm.cardNumber,
              remark: vm.ruleForm.remark
            });
            if (res.data.message == 'success') {
              vm.addc = false;
              vm.$refs.ruleForm.resetFields();
              vm.success('修改成功');
              vm.initialization();
            } else {
              vm.warn(res.data.error);
            }

          })();
        }
      },
      resetForm(formName) {
        this.addc = false;
        this.$refs[formName].resetFields();
        if (this.txt == '确认修改') {
          for (var k in this.modobj) {
            this.modobj[k] == '';
          }
        }
      },
      del(t) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var vm = this;
          (async function () {
            let res = await http.post(api.infrared.del_card, {
              id: t.id
            });
            if (res.data.message == 'success') {
              vm.success('删除成功');
              vm.initialization();
            } else {
              vm.warn(res.data.error);
            }

          })();

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //成功
      success(t) {
        this.$message({
          message: t,
          type: 'success'
        });
      },
      //失败
      error(t) {
        this.$message.error(t);
      },
      //警告
      warn(t) {
        this.$message({
          message: t,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/CardManagement.css";
</style>
